{% load staticfiles %}
{% csrf_token %}
<!DOCTYPE html>
<html>
    <head style="height: 100%; width: 100%; margin: 0;">
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="{% static 'css/layui.css' %}">
        <link rel="stylesheet" href="{% static 'css/index.css' %}">
        <link rel="stylesheet" href="{% static 'css/users.css' %}">
        <title>用户管理</title>
    </head>
    <body style="height: 100%; width: 100%; margin: 0;">
        <div class="manage">
            <div id="manage-left" class="manage-left">

                <fieldset class="layui-elem-field layui-field-title">
                    <legend>用户列表</legend>
                </fieldset>

                <table class="layui-table layui-table-user" id="user_list" lay-filter="user_list"></table>
            </div>
            <div id="manage-right" class="manage-right">
                <div class="manage-right-top">
                    <fieldset class="layui-elem-field">
                        <legend>添加用户</legend>
                        <div class="layui-field-box">
                            <form id="formuser" name="formuser" class="layui-form layui-form-pane">
                                <div class="layui-form-item layui-form-item-hosts">
                                    <label class="layui-form-label">账户--密码</label>
                                    <div class="layui-input-inline" style="width:33%;">
                                        <input type="text" id="username" name="username" required lay-verify="required" autocomplete="off" placeholder="请输入账户名" class="layui-input">
                                    </div>
                                    <div class="layui-input-inline" style="width:33%;">
                                        <input type="password" id="password" name="password" required lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-item-hosts">
                                    <label class="layui-form-label">用户--邮箱</label>
                                    <div class="layui-input-inline" style="width: 33%;">
                                        <input type="text" id="name" name="name" required lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                                    </div>
                                    <div class="layui-input-inline" style="width: 33%;">
                                        <input type="text" id="email" name="email" required lay-verify="required" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-item-hosts">
                                    <label class="layui-form-label">权限配置</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="permissions_page" name="permissions_page" required lay-verify="required" autocomplete="off" placeholder="请选择权限ID" class="layui-input" >
                                    </div>
                                    <button type="button" id="adduser" class="layui-btn" lay-submit lay-filter="adduser">添加</button>
                                    <button type="button" id="moduser" class="layui-btn layui-btn-warm" lay-submit lay-filter="moduser" style="display:none">修改</button>
                                    <button type="reset" id="resetuser" class="layui-btn layui-btn-danger" style="display:none" lay-submit lay-filter="resetuser">重置</button>
                                </div>
                            </form>
                        </div>
                    </fieldset>

                    <fieldset class="layui-elem-field">
                        <legend>添加权限</legend>
                        <div class="layui-field-box">
                            <form id="formrule" name="formrule" class="layui-form layui-form-pane">
                                <div class="layui-form-item layui-form-item-hosts">
                                    <label class="layui-form-label">ID--描述</label>
                                    <div class="layui-input-inline" style="width: 23%;">
                                        <input type="text" name="ruleid" required lay-verify="required" autocomplete="off" placeholder="输入ID" class="layui-input">
                                    </div>
                                    <div class="layui-input-inline" style="width: 43%;">
                                        <input type="text" name="describe" required lay-verify="required" autocomplete="off" placeholder="输入描述" class="layui-input">
                                    </div>
                                </div>
                                <div class="field-box-button">
                                    <button type="button" id="addrule" class="layui-btn" lay-submit lay-filter="addrule">添加</button>
                                    <button type="reset" id="emptyrule" class="layui-btn layui-btn-primary" style="display: none;">重置</button>
                                </div>
                            </form>
                            <div class="demoTable" style="margin:0 auto; width: 3px; margin-top: -38px;">
                                <button data-type="getCheckLength" class="layui-btn layui-btn-normal">生成</button>
                            </div>
                        </div>
                    </fieldset>
                </div>


                <table class="layui-table layui-table-rule" id="rule_list" lay-filter="rule_list"></table>
            </div>
        </div>

        <script>
            var user_list = {{ user_list | safe}};
            var rule_list = {{ rule_list | safe}};
        </script>
        <script src="{% static 'layui.all.js' %}"></script>
        <script type="text/html" id="ruleDemo">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delrule">删除</a>
        </script>
        <script type="text/html" id="userstatus">
            {% verbatim myblock %}
                {{#  if(d.is_using == 1){ }}
                    <span class="label label-success">已启用</span>
                {{#  } else { }}
                    <span class="label label-default">已禁用</span>
                {{#  } }}
            {% endverbatim myblock %}
        </script>
        <script type="text/html" id="userbutton">
            {% verbatim myblock %}
                {{#  if(d.is_using == 1){ }}
                    <span title="停用" class="handle-btn handle-btn-stop"  lay-event="disuser"><i class="layui-icon">&#xe651;</i></span>
                {{#  } else { }}
                    <span title="启用" class="handle-btn handle-btn-start" lay-event="enuser"><i class="layui-icon">&#xe652;</i></span>
                {{#  } }}
            {% endverbatim myblock %}
            <span title="修改" class="handle-btn" lay-event="modifyuser"><i class="layui-icon">&#xe6b2;</i></span>
            <span title="删除" class="handle-btn" lay-event="deluser"><i class="layui-icon">&#xe640;</i></span>
        </script>
        <script src="{% static 'js/users/usermanage.js' %}"></script>
    </body>
</html>